<!--
* @description:人事看板
* @fileName: ThePersonnelKanBan
* @author:孟帅龙
* @date:2021-1-14
* @后台人员:孟帅龙
-->
<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8"
        ><div class="grid-content bg-purple"></div>
        <div class="rzrs"  @click="ruzhi">
          <br />
          <b>入职人数</b>
          <br />
          <a>查看详情</a>
        </div>
      </el-col>
      <el-col :span="8"
        ><div class="grid-content bg-purple-light">
          <div class="lzrs"  @click="lizhi">
            <br />
            <b>离职人数</b>
            <br />
            <a>查看详情</a>
          </div>
        </div></el-col
      >
      <el-col :span="8"
        ><div class="grid-content bg-purple">
          <div class="rgrs">
            <br />
            <b>25</b>
            <br />
            <a>员工总人数</a>
          </div>
        </div></el-col
      >
    </el-row>
    <div class="card2-4">
      <div class="card2-1div4" id="main4"></div>
      <div slot="hreader" class="clearfixb">
        <!-- <b>工龄比</b> -->
      </div>
    </div>
    <div class="card2-3">
      <div class="card2-1div3" id="main3"></div>
      <div slot="hreader" class="clearfixb">
        <b>工龄比</b>
      </div>
    </div>
    <div class="card2-2">
      <div class="card2-1div2" id="main2"></div>
      <div slot="hreader" class="clearfixb">
        <b>部门人数</b>
      </div>
    </div>
    <div class="card2-1">
      <div class="card2-1div1" id="main1"></div>
      <div slot="hreader" class="clearfixb">
        <b>离职人数</b>
      </div>
    </div>
  </div>
</template>

<script>
const echarts = require("echarts");
export default {
  data() {
    return {};
  },
  mounted() {
    this.getzhe();
    this.getzhu();
    this.getbing();
    this.gethengzhu();
  },
  methods: {
    ruzhi() {
      this.$router.push("/HiredToHandle");
    },
    lizhi() {
      this.$router.push("/LeaveToDealWith");
    },
    getzhe() {
      echarts.init(document.getElementById("main1")).setOption({
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [1, 2, 1, 4, 3, 5, 2, 4, 5, 6, 1, 2],
            type: "line",
          },
        ],
      });
    },
    getzhu() {
      echarts.init(document.getElementById("main2")).setOption({
        xAxis: {
          type: "category",
          data: ["开发部", "测试部", "策划部"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [4, 7, 9],
            type: "bar",
          },
        ],
      });
    },
    getbing() {
      echarts.init(document.getElementById("main3")).setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 10, name: "1-3年" },
              { value: 5, name: "7-9年" },
              { value: 3, name: "10年以上" },
              { value: 7, name: "4-6年" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    gethengzhu() {
      echarts.init(document.getElementById("main4")).setOption({
        title: {
          text: "员工年龄比",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: ["50岁", "40-49岁", "30-39岁", "25-29岁", "18-24岁"],
        },
        series: [
          {
            type: "bar",
            data: [4, 7, 6, 12, 1],
          },
        ],
      });
    },
  },
};
</script>

<style>
.card2-1 {
  float: left;
  widows: 700px;
  height: 400px;
}
.card2-1div1 {
  width: 700px;
  height: 400px;
}
.card2-2 {
  float: right;
  widows: 700px;
  height: 400px;
}
.card2-1div2 {
  width: 700px;
  height: 400px;
}
.card2-3 {
  float: left;
  widows: 700px;
  height: 400px;
}
.card2-1div3 {
  width: 700px;
  height: 400px;
}
.card2-4 {
  float: right;
  widows: 700px;
  height: 400px;
}
.card2-1div4 {
  width: 700px;
  height: 400px;
}
.rzrs {
  width: 400px;
  height: 100px;
  background-color: rgb(206, 77, 35);
}
.lzrs {
  width: 400px;
  height: 100px;
  background-color: rgb(21, 235, 85);
}
.rgrs {
  width: 400px;
  height: 100px;
  background-color: rgb(75, 140, 177);
}
</style>